<template>
    <div class="os-login-main">
      <div class="os-login-lottie">
        <lottie-web :src="dataJson" />
      </div>
      <div class="os-login-form">
        <el-form
            ref="FormRef"
            :model="form"
            :rules="rules"
            label-width="120px"
            class="os-login-form-main"
            label-position="top"
            size="large"
            status-icon
        >
          <h1>用户登录</h1>
          <el-form-item prop="username">
            <el-input v-model="form.username" class="os-form-input" size="large" placeholder="用户名" :prefix-icon="User" clearable/>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="form.password" type="password" class="os-form-input" size="large" placeholder="密码" :prefix-icon="Lock" clearable/>
          </el-form-item>
          <el-form-item prop="code" class="os-form-code">
            <el-input v-model="form.code" class="os-form-input os-input-code" size="large" placeholder="验证码" :prefix-icon="CircleCheck" clearable />
            <span class="show-code">
              <img :src="code_src" alt="" @click="showCode">
            </span>
          </el-form-item>
          <el-form-item>
            <el-button class="os-login-but" type="primary" @click="submitForm('FormRef')">登录</el-button>
          </el-form-item>
          <p class="os-login-copyright">© 2023 绍兴启昱网络有限公司 ALL RIGHTS RESERVED</p>
        </el-form>
      </div>
    </div>
</template>

<script lang="ts" setup name="Login">
import { reactive, ref } from 'vue'
import dataJson from '@/assets/lottie/login-bg.json'
import LottieWeb from '@/components/LottieWeb/index.vue'
import type { FormInstance, FormRules } from 'element-plus'
import { User, Lock, CircleCheck } from '@element-plus/icons-vue'
const FormRef = ref<FormInstance>()
const form = reactive({
  username: 'Admin',
  redirect: '',
  password: '',
  secret_key: '',
  code: ''
})

const code_src = ''

const rules = reactive<FormRules>({

})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style>
.os-login-main {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  background: var(--MEB);
  justify-content: center;
}

.os-login-lottie {
  width: 750px;
}

.os-login-form {
  width: 350px;
  height: 420px;
  padding: 30px 50px;
  border-radius: 30px;
  background: var(--MAB);
}

.os-login-form .os-form-input, .show-code {
  height: 48px;
}

.os-form-code .el-form-item__content {
  justify-content: space-between;
}

.os-input-code {
  width: calc(100% - 150px);
}

.os-login-but {
  width: 100%;
  height: 48px;
}

.os-login-copyright {
  text-align: center;
  font-size: 14px;
  margin-bottom: 10px;
}
</style>
